---
import config from "../../config";

interface ResponseServers {
  error?: any;
  data: DataServer[];
  count?: any;
  status: number;
  statusText: string;
}

type DataServer = {
  name: string;
  created_at: string;
  status: string;
  description: string;
  id: number;
  urlHost: string;
  img: string;
  urlHome: string;
};

const response = await fetch(`${config.baseUrlBackend}/server/list`);
const { data: servers }: ResponseServers = await response.json();
---

<section id="servers" class="py-8">
  <div class="flex flex-col gap-12 items-center justify-center">
    <h2 class="text-2xl md:text-5xl font-extrabold text-quaternary">
      Servers availables
    </h2>
    <ul
      class="w-full p-0 m-0 flex gap-8 flex-col sm:flex-row justify-center items-center"
    >
      {
        servers
          .filter(({ status }) => status === "working")
          .map(({ img, urlHome, name }) => (
            <li>
              <a
                target="_blank"
                rel="noopener noreferrer"
                class="menu__link"
                href={urlHome}
              >
                <img
                  class:list={[
                    "w-40 grayscale transition-all ease-linear duration-200 hover:grayscale-0 hover:scale-105 md:w-32 xl:w-60",
                    name === "ps2" || name === "indie"
                      ? "w-10 md:w-24 xl:w-40"
                      : "",
                    name === "brasil_server" || name === "american_server"
                      ? ""
                      : "bg-white-lazy",
                  ]}
                  alt={`${name.replace("_", " ")} logo`}
                  src={img}
                  width="auto"
                  height="auto"
                />
              </a>
            </li>
          ))
      }
    </ul>
  </div>
</section>
